﻿@model FlyingCircusWebIS.ViewModels.ReservaVM.ReservarVM
@{
    ViewBag.Title = "Reservar";
}

<div id="outraspg">
    <h1>Reservar</h1>


    @using (Html.BeginForm("Reservar", "Reserva", FormMethod.Post))
    {
    
        @Html.HiddenFor(v => v.IdVoo, new { id = "idVoo" })
        @Html.HiddenFor(v => v.AssentoSelecionado, new { id = "assentoSelecionado" })
        @Html.HiddenFor(v => v.Assentos, new { id = "assentosComercializaveis" })
        @Html.HiddenFor(v => v.IdPessoaCliente, new { id = "idPessoaCliente" })
        @Html.HiddenFor(v => v.AssentosPorLinha, new { id = "assentosPorLinha" })
        @Html.HiddenFor(v => v.Edicao)
        @Html.HiddenFor(v => v.IdModeloAeronave, new { id = "idModeloAeronave" })
        @Html.HiddenFor(v => v.TotalAssentosPorModelo)

        //finalizar
        @Html.HiddenFor(ae => ae.voo.AeroportoPartida.NomeAeroporto, new { id = "valorAeroportoPartida" })
        @Html.HiddenFor(ae => ae.voo.AeroportoPartida.Cidade.NomeCidade, new { id = "valorCidadePartida" })
        @Html.HiddenFor(ae => ae.voo.AeroportoPartida.Cidade.UF, new { id = "valorUFPartida" })
        @Html.HiddenFor(ae => ae.voo.AeroportoChegada.NomeAeroporto, new { id = "valorAeroportoChegada" })
        @Html.HiddenFor(ae => ae.voo.AeroportoChegada.Cidade.NomeCidade, new { id = "valorCidadeChegada" })
        @Html.HiddenFor(ae => ae.voo.AeroportoChegada.Cidade.UF, new { id = "valorUFChegada" })

        @Html.HiddenFor(v => v.voo.DataPartida, new { id = "valorDataPartida" })
        @Html.HiddenFor(v => v.voo.DataChegada, new { id = "valorDataChegada" })
        @Html.HiddenFor(v => v.TempoDeVoo, new { id = "valorDuracao" })
                
        @Html.HiddenFor(v => v.PrecoReserva, new { id = "valorPrecoReserva" })
        @Html.HiddenFor(v => v.DescontoDeVooPromocional, new { id = "valorDescontoVooPromocional" })
        @Html.HiddenFor(v => v.DescontoClienteEspecial, new { id = "valorDescontoClienteEspecial" })
        
        
        <div id="tabs">
            <ul>
                <li><a href="#etapaFormaPagamento" id="etapaFormaPagamentoLink">1. Forma de pagamento</a></li>
                <li><a href="#etapaSelecaoAssento" id="etapaSelecaoAssentoLink">2. Assento</a></li>
                <li><a href="#etapaFinalizacao" id="etapaFinalizacaoLink">3. Finalizar</a></li>
            </ul>

            <div id="etapaFormaPagamento">

                @Html.ValidationSummary(true)
                <dl>
                    <dd>
                        @Html.LabelFor(f => f.IdPagamento)
                        @Html.DropDownListFor(f => f.IdPagamento, Model.ItensFormaDePagamento, new { id = "dropPagamento" })<br />
                        @Html.ValidationMessageFor(f => f.IdPagamento)
                    </dd>
                    <dd>
                        @Html.LabelFor(c => c.CodCupom)
                        @Html.TextBoxFor(c => c.CodCupom, new { id = "codCupom" })
                        @Html.ValidationMessageFor(c => c.CodCupom)
                    </dd>
                </dl>
                <div class="espacodasinfos">
                    <input class="avancar" type="button" id="avancarParaAssentos" value="Avançar >>" />
                </div>
            </div>

            <div id="etapaSelecaoAssento">
                <h1>Seleção de assento</h1>
                <h3>Legenda</h3>
                <div>
                    <img class="no-border" src="~/Imagens/imgLivre.png" /><span class="legenda">Disponível</span>
                    <img class="no-border" src="~/Imagens/imgOcupado.png" /><span class="legenda">Ocupado</span>
                    <img class="no-border" src="~/Imagens/imgDesativado.png" /><span class="legenda">Desativado</span>
                    <img class="no-border" src="~/Imagens/imgSelecionado.png" alt="Alternate Text" /><span class="legenda">Selecionado</span>
                </div>
                <table>
                    <tr>
                        @for (int i = 0; i < @Model.AssentosPorLinha; i++)
                        {
                            <th class="fileiras">
                                @(Convert.ToChar(i + 'A'))
                            </th>
                            if (Model.IdModeloAeronave == 1)
                            {
                                if (i % 6 == 2)
                                { <td class="corredor"></td> }
                            }
                            else if (Model.IdModeloAeronave == 2)
                            {
                                if (i % 7 == 1 || i % 7 == 4)
                                { <td class="corredor"></td> }
                            }
                            else
                            {
                                if (i % 10 == 2 || i % 10 == 6)
                                { <td class="corredor"></td> }
                            }
                        }
                    </tr>
                    @{
                        int contAssentoComercializaveis = 0; //utilizada para criar assentos de indice 0 ao n-1
                        int linha = 1; //utilizada para identificar a linha que se encontra o assento

                        foreach (List<int> assentos in Model.Matriz)
                        {   
                        <tr>
                            @foreach (int lugar in assentos)
                            {
                                if (contAssentoComercializaveis < Model.TotalAssentosPorModelo && Model.AssentosOcupados.Contains(contAssentoComercializaveis + 1))
                                {
                                <td class="ocupado"  id="@(contAssentoComercializaveis + 1)"></td>
                                }
                                else if (contAssentoComercializaveis < Model.Assentos && Model.AssentoSelecionado != (contAssentoComercializaveis + 1).ToString())
                                {
                                <td class="livre"  id="@(contAssentoComercializaveis + 1)"></td>
                                }
                                else if (Model.AssentoSelecionado == (contAssentoComercializaveis + 1).ToString())
                                {
                                <td class="selecionado"  id="@(contAssentoComercializaveis + 1)"></td>
                                }
                                else
                                {
                                <td class="desativado"></td>
                                }

                                if (Model.IdModeloAeronave == 1 && contAssentoComercializaveis % 6 == 2)
                                {
                                <td class="corredor">@linha</td> 
                                }
                                else if (Model.IdModeloAeronave == 2 &&
                                            (contAssentoComercializaveis % 7 == 1 || contAssentoComercializaveis % 7 == 4))
                                {
                                <td class="corredor">@linha</td>
                                }
                                else if (Model.IdModeloAeronave == 3 &&
                                            (contAssentoComercializaveis % 10 == 2 || contAssentoComercializaveis % 10 == 6))
                                {
                                <td class="corredor">@linha</td> 
                                }
                                contAssentoComercializaveis++;
                            }
                        </tr>
                            linha++;
                        }
                    }
                </table>
                <br />
                <input class="avancar" type="button" id="voltarParaFormaDePagamento" value="<< Voltar" />
                <input class="avancar" type="button" id="avancarParaFinalizacao" value="Avançar >>" />
            </div>

            <div id="etapaFinalizacao">
                <h1>Finalização</h1>

                <div class="infofinal">
                    <span class="info">Origem:</span>
                    <div id="aeroportoPartida" class="conteudo"></div>
                    <div class="conteudo">-</div>
                    <div id="cidadePartida" class="conteudo"></div>
                    <br />
                    <div class="info">Destino:</div>
                    <div id="aeroportoChegada" class="conteudo"></div>
                    <div class="conteudo">-</div>
                    <div id="cidadeChegada" class="conteudo"></div>
                </div>
                <br />
                <div class="infofinal">
                    <div class="info">Partida: </div>
                    <div class="conteudo" id="dataPartida"></div>
                </div>
                <div class="infofinal">
                    <div class="info">Previsão de chegada: </div>
                    <div class="conteudo" id="dataChegada"></div>
                </div>
                <br />
                <div>
                    <div class="info">Duração: </div>
                    <div class="conteudo" id="duracao"></div>
                </div>
                <br />
                <br />
                <div>
                    <div class="info">Assento selecionado: </div>
                    <div class="conteudo" id="exibeAssentoSelecionado">Nenhum</div>
                </div>

                <br />
                <div>
                    <div class="info">Forma de pagamento:  </div>
                    <div class="conteudo" id="exibeFormaDePagamento"></div>
                </div>
                <br />
                <div>
                    <div class="info">Cupom: </div>
                    <div class="conteudo" id="exibeCupom"></div>
                </div>
                <br />
                <br />
                <table>
                    <tr>
                        <td>
                            <div class="info">Valor do voo: : </div>
                        </td>
                        <td>
                            <div class="conteudo" id="precoReserva"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="info">Desconto do Voo promocional: </div>
                        </td>
                        <td>
                            <div class="conteudo" id="descontoVooPromocional"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="info">Desconto de cliente especial : </div>
                        </td>
                        <td>
                            <div class="conteudo" id="descontoClienteEspecial"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="info">Desconto cupom: </div>
                        </td>
                        <td>
                            <div class="conteudo" id="exibeDescontoCupom"></div>
                        </td>
                    </tr>
                    <tr class="efetuar">
                        <td>
                            <div class="info">VALOR TOTAL:  </div>
                        </td>
                        <td>
                            <div class="conteudo" id="valorFinal"></div>
                        </td>
                    </tr>
                </table>

                <br />
                <br />
                <input class="avancar" type="button" id="voltarParaAssentos" value="<< Voltar" />
                <input class="avancar" type="submit" value="Finalizar" />
            </div>
        </div>
    }
</div>
@section css
{
    @Styles.Render("~/Content/css/formulario")
    <style type="text/css">
        .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
            background: rgb(26, 188, 156);
        }
        .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active{
            background: #34495e;
            font-weight:bold;
        }
    </style>
}

@section scripts
{
    <script type="text/javascript">
        $(document).ready(function () {

            // Plugin para uso de tabs
            $("#tabs").tabs();

            $("#avancarParaAssentos").click(function () {
                $("#etapaSelecaoAssentoLink").click();
            });

            $("#avancarParaFinalizacao").click(function () {
                $("#etapaFinalizacaoLink").click();
            });

            $("#voltarParaFormaDePagamento").click(function () {
                $("#etapaFormaPagamentoLink").click();
            });

            $("#voltarParaAssentos").click(function () {
                $("#etapaSelecaoAssentoLink").click();
            });



            // Lógica para o selecionador de assentos
            $('td').click(function () {
                if (this.className == "livre") {
                    for (var i = 0; i < $("#assentosComercializaveis").val() ; i++) {
                        if ($("#" + (i + 1)).attr("class") == "selecionado") {
                            $("#" + (i + 1)).removeClass("selecionado").addClass("livre");
                        }
                    }
                    $(this).removeClass("livre").addClass("selecionado");
                    $("#assentoSelecionado").val(this.id);
                }
                else if (this.className == "selecionado") {
                    $(this).removeClass("selecionado").addClass("livre");
                    $("#assentoSelecionado").val("");
                }

                //Apresenta o assento selecionado na finalização
                if ($("#assentoSelecionado").val() != "") {
                    $.get('@Url.Action("ApresentaAssentoSelecionado")', { assentoSelecionado: $("#assentoSelecionado").val(), idModeloAeronave: $("#idModeloAeronave").val() }, function (data) {
                        $("#exibeAssentoSelecionado").html(data + "-" + $("#assentoSelecionado").val());
                    });
                }
                else {
                    $("#exibeAssentoSelecionado").html("Nenhum");
                }
            });

            function atualizaFinalizar() {
                $("#aeroportoPartida").html($("#valorAeroportoPartida").val());
                $("#cidadePartida").html($("#valorCidadePartida").val() + " (" + $("#valorUFPartida").val() + ") ");
                $("#aeroportoChegada").html($("#valorAeroportoChegada").val());
                $("#cidadeChegada").html($("#valorCidadeChegada").val() + " (" + $("#valorUFChegada").val() + ") ");

                $("#dataPartida").html($("#valorDataPartida").val());
                $("#dataChegada").html($("#valorDataChegada").val());
                $("#duracao").html($("#valorDuracao").val());

                $("#precoReserva").html($("#valorPrecoReserva").val());
                $("#descontoVooPromocional").html($("#valorDescontoVooPromocional").val());
                $("#descontoClienteEspecial").html($("#valorDescontoClienteEspecial").val());
            }

            function atualizaCupom() {
                $.get('@Url.Action("RetornaCupom")', { codCupom: $("#codCupom").val() }, function (data) {
                    $("#exibeCupom").html($("#codCupom").val());
                    $("#exibeDescontoCupom").html(data);
                });
            }

            function atualizaValorReserva() {
                $.get('@Url.Action("ApresentaValorReserva")', { idVoo: $("#idVoo").val(), idCliente: $("#idPessoaCliente").val(), codCupom: $("#codCupom").val() }, function (data) {
                    $("#valorFinal").html(data);
                });
            }

            function atualizaFormaDePagamento() {
                $("#exibeFormaDePagamento").html(function () {
                    if ($("#dropPagamento").val() != "") {
                        return $("#dropPagamento :selected").text();
                    }
                    else {
                        return "Selecione uma forma de pagamento.";
                    }
                });
            }
            //Atualiza a finalização da reserva
            $("#etapaFinalizacaoLink").click(function () {
                atualizaFinalizar();
                atualizaCupom();
                atualizaFormaDePagamento();
                atualizaValorReserva();
            });

            atualizaFinalizar();
            atualizaCupom();
            atualizaFormaDePagamento();
            atualizaValorReserva();
        });
    </script>
}